<template>
    <div class="container">
        <header>
            <span class="title">用户列表</span>
            <RouterLink to="/home/user/useradd">添加用户</RouterLink>
        </header>

        <div>
            <table border="1">
                <tr>
                    <td>序号</td>
                    <td>用户名</td>
                    <td>年龄</td>
                    <td>邮箱</td>
                    <td>电话</td>
                </tr>
                <tr v-for="(user, index) in userList" :key="index">
                    <td>{{ index + 1 }}</td>
                    <td>{{ user.username }}</td>
                    <td>{{ user.age }}</td>
                    <td>{{ user.email }}</td>
                    <td>{{ user.phone }}</td>
                </tr>
            </table>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { RouterLink } from 'vue-router';
const userList = ref([])
onMounted(() => {
    // console.log(window.localStorage.getItem('userlist'))
    userList.value = JSON.parse(window.localStorage.getItem('userlist'))
})

</script>
<style scoped>
.container {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.title {
    font-size: 24px;
    font-weight: bolder;
    padding-right: 10px;
}
</style>